import React from "react";

import { List, Badge, NavBar } from "antd-mobile";

const Item = List.Item;
const Brief = Item.Brief;

class Message extends React.Component {
  state = {
    disabled: false
  };

  render() {
    return (
      <div>
         <NavBar
          mode="light"
        >
          消息
        </NavBar>
        <List className="my-list">
          <Item
            extra={
              <div>
                <p className="time">10:30</p>
                <Badge text={77} overflowCount={55} />
              </div>
            }
            align="top"
            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
            multipleLine
            onClick={() => {}}
          >
            Title <Brief>subtitle</Brief>
          </Item>
          <Item
            extra={
              <div>
                <p className="time">10:30</p>
                <Badge text={77} overflowCount={55} />
              </div>
            }
            align="top"
            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
            multipleLine
            onClick={() => {}}
          >
            Title <Brief>subtitle</Brief>
          </Item>
          <Item
            extra={
              <div>
                <p className="time">10:30</p>
                <Badge text={77} overflowCount={55} />
              </div>
            }
            align="top"
            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
            multipleLine
            onClick={() => {}}
          >
            Title <Brief>subtitle</Brief>
          </Item>
          <Item
            extra={
              <div>
                <p className="time">10:30</p>
                <Badge text={77} overflowCount={55} />
              </div>
            }
            align="top"
            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
            multipleLine
            onClick={() => {}}
          >
            Title <Brief>subtitle</Brief>
          </Item>
          <Item
            extra={
              <div>
                <p className="time">10:30</p>
                <Badge text={77} overflowCount={55} />
              </div>
            }
            align="top"
            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
            multipleLine
            onClick={() => {}}
          >
            Title <Brief>subtitle</Brief>
          </Item>
          <Item
            extra={
              <div>
                <p className="time">10:30</p>
                <Badge text={77} overflowCount={55} />
              </div>
            }
            align="top"
            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
            multipleLine
            onClick={() => {}}
          >
            Title <Brief>subtitle</Brief>
          </Item>
        </List>
        <style jsx="true">{`
          .my-list .spe .am-list-extra {
            flex-basis: initial;
          }
          .time {
            margin: 0;
          }
        `}</style>
      </div>
    );
  }
}

export default Message;
